'use client'

import { PlusOutlined } from '@ant-design/icons'
import { Button, Table, TableProps } from 'antd'
import { ReactNode } from 'react'

interface PageContainerProps {
  title: string
  showAdd?: boolean
  onAdd?: () => void
  tableProps: TableProps<any>
  children?: ReactNode
}

export default function PageContainer({ title, showAdd = true, onAdd, tableProps, children }: PageContainerProps) {
  const handleAdd = () => {
    if (onAdd) {
      onAdd()
    } else {
      console.warn('onAdd handler is not provided')
    }
  }

  return (
    <div className="flex flex-col h-full">
      {/* 头部区域 */}
      <div className="flex justify-between items-center mb-6">
        <h2 className="text-2xl font-medium m-0">{title}</h2>
        <div className="flex items-center gap-4">
          {children}
          {showAdd && (
            <Button type="primary" icon={<PlusOutlined />} onClick={handleAdd}>
              新增
            </Button>
          )}
        </div>
      </div>

      {/* 表格区域 */}
      <div className="flex-1 bg-white p-6 rounded-lg">
        <Table {...tableProps} />
      </div>
    </div>
  )
}
